<template>
	<view class="warp">
		<uni-section title="滑动视图" type="line" padding>
					<!-- 因为swiper特性的关系，请指定swiper的高度 ，swiper的高度并不会被内容撑开-->
					<swiper class="swiper" :indicator-dots="false">
						<swiper-item class="swiper-item">
							<uni-grid :column="3" :show-border="false" :square="false" @change="change">
								<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
									<view class="grid-item-box">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>
						<swiper-item class="swiper-item">
							<uni-grid :column="3" :show-border="false" :square="false" @change="change">
								<uni-grid-item v-for="(item, index) in list01" :index="index" :key="index">
									<view class="grid-item-box">
										<image :src="item.url" class="image" mode="aspectFill" />
										<text class="text">{{ item.text }}</text>
									</view>
								</uni-grid-item>
							</uni-grid>
						</swiper-item>						
					</swiper>
				</uni-section>
	</view>
</template>

<script>
	name:'article01'
	export default {
		data() {
			return {
				list: [{
										url: '/static/images/洗浴中心.svg',
										text: '洗浴',
										badge: '0',
										type: "primary"
									},
									{
										url: '/static/images/电玩城.svg',
										text: '电玩城',
										badge: '1',
										type: "success"
									},
									{
										url: '/static/images/酒吧.svg',
										text: '酒吧',
										badge: '99',
										type: "warning"
									},
									{
										url: '/static/images/ktv.svg',
										text: 'KTV',
										badge: '2',
										type: "error"
									},
									{
										url: '/static/images/台球.svg',
										text: '台球厅'
									},
									{
										url: '/static/images/猫咖.svg',
										text: '猫咖'
									}
								],
				list01: [{
										url: '/static/images/洗浴中心.svg',
										text: '洗浴',
										badge: '0',
										type: "primary"
									},
									{
										url: '/static/images/电玩城.svg',
										text: '电玩城',
										badge: '1',
										type: "success"
									},
									{
										url: '/static/images/酒吧.svg',
										text: '酒吧',
										badge: '99',
										type: "warning"
									},
									{
										url: '/static/images/ktv.svg',
										text: 'KTV',
										badge: '2',
										type: "error"
									},
									{
										url: '/static/images/台球.svg',
										text: '台球厅'
									},
									{
										url: '/static/images/猫咖.svg',
										text: '猫咖'
									}
								],
					}		
			},
		methods: {
					change(e) {
						let {
							index
						} = e.detail
						this.list[index].badge && this.list[index].badge++
		
						uni.showToast({
							title: `点击第${index+1}个宫格`,
							icon: 'none'
						})
					}
			
		}
	}
</script>

<style lang="scss">
	.image {
		width: 25px;
		height: 25px;
	}

	.text {
		font-size: 14px;
		margin-top: 5px;
	}
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction:column;
		align-items: center;
		justify-content: center;
		margin: 10%;
	}
	.swiper-item{
		margin-left: 5rpx;
		margin: 2%;
		margin-left: 25rpx;
	}
	.swiper {
		height: 170px;
		width: 650rpx;
		display: flex;
		border: 1rpx solid whitesmoke;
		width: 100%;
		border-radius: 25rpx;
		margin-top: 5rpx;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1425px) {
		.swiper {
			height: 630px;
		}
	}

	@media screen and (min-width: 1425px) {
		.swiper {
			height: 830px;
		}
	}
	/* #endif */
</style>
